<!-- dataTables -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugin/dataTables/media/css/jquery.dataTables.min.css">
<script type="text/javascript" src="__PUBLIC__/plugin/dataTables/media/js/jquery.dataTables.min.js"></script>

<script language="javascript" type="text/javascript" src="__PUBLIC__/js/product.common.js"></script>
<!-- form -->
<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>
<style type="text/css">
textarea{resize: none}
  #labellist,#categoryLabelList ul{ width: 100%; height: 30px;padding: 0;margin: 0;}
  #labellist li,#categoryLabelList li{ float: left; margin-right: 10px;}
  .mt15{ margin-top: 15px;}
  .mt10{ margin-top: 10px;}
  .picture_item {margin:5px;  padding: 5px 5px 40px ; cursor:pointer; width:120px; overflow:hidden;}
  .picture_item2 {border: 1px solid #ff0000;}
  .picture_item .title {padding-left:6px; width: 100%;}
  .page {border-bottom: 0px;}
  .pro-span{display:inline-block;background:#3b8ed3;margin:0 2px;padding:8px 12px;color:#fff;font-size: 12px;vertical-align: middle;line-height: 1;}
  .txtspan{display:inline-block;margin:0 2px;padding:5px;color:#3b8ed3;font-size: 12px;vertical-align: middle;line-height: 1;}
  .ssjgbox{width:550px;min-height:100px;padding: 5px;margin-top:10px;border:1px #c5d6e0 solid;background:#f5f5f5;}
  .ly-addbox{margin: 0 auto;padding: 10px;font-size: 14px;}
  .ly-addbox .label-180{display: block;float: left;width: 180px;text-align: right;}
  .pircebox{position:fixed;top:20%;right:10%;background:#f4f4f4;border:1px #dcdcdc solid;width:260px;min-height:200px;padding:8px 15px;box-sizing:border-box;}
  .pricelist dl{width: 100%;padding: 0;margin:15px 0;list-style: none;}
  .pricelist dl dt{float: left;display:block;width: 80px;text-align: left;color: #939393}
  .pricelist dl dd{float: left;display:block;text-align: left;color: #939393}
  .piclist{ margin-top: 25px;}
  .piclist li{float:left;width:325px;margin-right:30px;margin-bottom: 20px;padding:8px;border:1px #c5d6e0 solid;box-sizing:border-box}
  .l{ float: left;display:block;}
  .r-txt{line-height:1.8; padding-left:10px;}
  .font24{ font-size: 24px;}
  .filebox{width: 150px;height: 120px;border: 1px #CCC solid;position: relative;overflow: hidden;text-align: center;vertical-align: middle;cursor: pointer}
  .filebox .file-btn{width:150px;height: 120px;position: absolute;right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999}
  .filebox .file-imgbox{position: absolute;width: 150px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;}
  .probox{width:780px; margin-bottom:25px; border:1px #c5d6e0 solid; padding:10px;}
  .operateDeparture{margin-bottom: 10px;}
  .clearLabel{margin-bottom: 10px;}
</style>
<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Webproduct/selladd')}">
    <!--product pricebox-->
     <div class="pircebox">
       <p style="font-size:20px; text-align: center;">当前产品总成本</p>
       <div class="pricelist">
       </div>
     </div>
    <dl>
      <dt>线路名称：</dt>
      <dd>
        <input type="text" name="title" class="inp_one inp_w550" maxlength="30" placeholder="30个字符以内"/>
        &nbsp;<input type="checkbox" name="verify"  value="0" />&nbsp;二次确认
      </dd>
    </dl>
    <dl>
      <dt>扩展名称：</dt>
      <dd>
        <input type="text" name="extend" class="inp_one inp_w550" maxlength="35" placeholder="35个字符以内"/>
        &nbsp;<input type="checkbox" name="special" value="1" />&nbsp;特殊产品
      </dd>
    </dl>
    <dl>
      <dt>产品描述：</dt>
      <dd>
        <textarea rows="6" cols="75" name="description" value="{$info.description}" maxlength="300" placeholder="300个字符以内"></textarea>
      </dd>
    </dl>
    <dl>
      <dt> 关键词：</dt>
      <dd>
        <input type="text" name="keyWords" class="inp_one inp_w550" placeholder='英文逗号"|"分隔，数量3个，尽量选择长尾词'/>
      </dd>
    </dl>
    <dl>
      <dt>产品标签：</dt>
      <dd>
          <!-- //产品标签： -->
          <div class="clearLabel" id="classLabel" >

          </div>
          <div class="clearLabel">
            {$productLabelHtml}
            <input type="text" name="labelKeyWords" class="inp_w250">
            <input type="button" onclick="getLabel()" value="查询" style="padding: 6px 10px;border: 0;background-color: coral;color: #FFF;">
          </div>
          <div class="clearLabel">
            <ul id="labellist">
              <foreach name="labelArr" item="label">
              <li style="position: relative;display: block; min-width: 60px; height: 24px;">
                <input type="checkbox" name="label[]" value="{$label.id}" style="position: absolute; min-width: 60px; height: 24px;  margin-right: 20px; opacity: 0; z-index: 99999;"onclick="currProductLabel(this,'{$label.id}','{$label.name}')">
                <span style="position: absolute; display: block; text-align: center; min-width: 60px; height: 24px;  top:0px; right: 0px; bottom: 0px; left: 0px; margin: auto; cursor: pointer; background-color: #CCC; color: #FFF; line-height: 24px; z-index: 1; ">{$label.name}</span>
              </li>
              </foreach>
            </ul>
          </div>
      </dd>
    </dl>

    <dl>
      <dt>主站分类：</dt>
      <dd>
        <select name="categoryID" onchange="packCategory(this)">
          <option value="0">请选择</option>
          <foreach name="categoryArr" item="categoryArr">
          <option value="{$categoryArr.id}">{$categoryArr.name}</option>
          </foreach>
        </select>
        <select name="packCategoryTwo" onChange="categoryLabelList(this)">
          <option value="0">请选择</option>
        </select>
      </dd>
    </dl>

    <dl>
      <dt>主站分类标签：</dt>
      <dd id="categoryLabelList">

      </dd>
    </dl>
    <dl>
      <dt>出发地：</dt>
        <dd>
          <div class="selectDepartureNums">
            <a href="javascript:;" onclick="departureCityAdd(this)">新增出发地</a>
          </div>
        </dd>
    </dl>
    <dl>
      <dt> 目的地：</dt>
      <dd>
        <div class="selectDestinationNums">
            <div class="selectDestination" style="float: left;">
              {$destinationHtml.areaSelect}
              {$destinationHtml.countrySelect}
              {$destinationHtml.citySelect}
            </div>
            <div class="operateDestination" style="float: left;">
              <a href="javascript:;" onclick="destinationHtmlAdd(this)">添加</a>
            </div>
            <div class="clear"></div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 行程天数 ：</dt>
      <dd>
        <input type="text" name="travelDays" class="inp_small" />天
        <input type="text" name="travelNight" class="inp_small" />晚
      </dd>
    </dl>
     <dl>
      <dt> 市场价：</dt>
      <dd>
        <input type="text" name="marketPrice" class="inp_small" /> /人起
      </dd>
    </dl>
    <dl>
      <dt> 现价：</dt>
      <dd>
        <input type="text" name="price" class="inp_small" /> /人起
      </dd>
    </dl>
     <dl>
      <dt> 产品缩略图：</dt>
      <dd>
      <div>
        <input type="button" class="button-green" value="上传图片" onclick="uploadImgHtml('thumbImages')">
      </div>
        <div><font color="red">(尺寸:320px*210px)</font></div>
        <div style="width: 120px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
          <div id="thumbImages" class="fileupload" style="  position: absolute;width: 120px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">

          </div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 产品大图：</dt>
      <dd>
      <div>
        <input type="button" class="button-green" value="上传图片" onclick="uploadImgHtml('originalImages')">
      </div>
      <div><font color="red">(尺寸:宽度1920px为佳，比例2:1)</font></div>
        <div style="width: 300px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;" >
          <div id="originalImages"  class="fileupload" style=" position: absolute;width: 300px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
          </div>
        </div>
      </dd>
    </dl>
    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <input type="button" class="button-green" onclick="submitDo()" value="保 存">
      &nbsp;
      <a href="{:U(MODULE_NAME.'/Webproduct/sell')}" class="button-return">返回产品列表</a>
    </div>
  </form>
</div>
<script type="text/javascript">
/**
 * [destination_add description]
 * @return {[type]} [description]
 */
function destinationHtmlAdd(obj)
{

  var i = '0';
  $(obj).parent().parent().parent().find('select').each(function(index, el) {
    if(el.value == '0'){i++;}
  });

  if(i == '0')
  {
    if($('.selectDestinationNums').length < 3)
    {
      var html = '';
      html += '<div class="selectDestinationNums" style="margin-top: 10px;">';
          html += '<div class="selectDestination" style="float: left;">';
            html += '{$destinationHtml.areaSelect}';
            html += '&nbsp;';
            html += '{$destinationHtml.countrySelect}';
            html += '&nbsp;';
            html += '{$destinationHtml.citySelect}';
          html += '</div>';
          html += '<div class="operateDestination" style="float: left;">';
            html += '<a href="javascript:;" onclick="destinationHtmlDel(this)">删除</a>';
          html += '</div>';
          html += '<div class="clear"></div>';
      html += '</div>';
      $(obj).parent().parent().parent().append(html);
    }
    else
    {
       layer.msg('暂只支持最多三个目的地');
    }
  }
  else
  {
    layer.msg('请填写完整已有的目的地选项');
  }
}

/**
 * [uploadImgHtml description]
 * @return {[type]} [description]
 */
function uploadImgHtml(thumbImages)
{
  var sizeType = 0;
  switch (thumbImages) 
  {
    case 'thumbImages':
      sizeType = 0;
      break;
    case 'originalImages':
      sizeType = 1;
      break;
  }

  var cityID     = $('select[name="cityID[]"]:first').val();

  //iframe层-父子操作
  var Div = layer.open({
              type: 2,
              area: ['800px', '400px'],
              content: ['/Home/Public/uploadImages.html?type=Product&sizeType='+sizeType+'&cityID='+cityID,'no'],
              btn: ['确认','取消'], //按钮
              yes: function(index, layero){ //或者使用btn1
                  //按钮【按钮一】的回调
                  
                  var obj = $(window.frames['layui-layer-iframe'+index].document);
                  var object = obj.find("#selectImg ul li .curr");
                  if(object.length <= 0)
                  {
                    var imgUrl = obj.find("#dndArea input[name='fileData[]']").val();
                  }
                  else
                  {
                    var imgUrl = object.parent().find('img').attr('src')
                  }

                  $('#'+thumbImages).empty();
                  $('#'+thumbImages).append('<img src="'+imgUrl+'" width="100%" height="100%"><input type="hidden" name="'+thumbImages+'" class="headerImg" value="'+imgUrl+'">');
                  layer.close(Div);
              },
              cancel: function(index){ //或者使用btn2
                  //按钮【按钮二】的回调
                  layer.close(Div);
              }
          });
}
</script>